<template>
  <div>
    <!-- TableModule  tableModule是一个对象，下面有解释 -->
    <TableModule :tableModule="tableModule" ref="TableModuleRef">
      <!-- #event是插入的新增按钮和删除按钮，具体操作按照自己的业务流程实现 -->
      <template #event>
        <el-popconfirm
          :title="`已勾选${multipleSelection.length}条记录，你确定要删除吗?`"
          hide-icon
          confirm-button-type="danger"
          @confirm="Delete"
        >
          <template #reference>
            <el-button type="danger" :disabled="!multipleSelection.length"
              >批量删除</el-button
            >
          </template>
        </el-popconfirm>
      </template>

      <!-- #tableColumn 插入表格的操作列 -->
      <template #tableColumn>
        <el-table-column align="center" fixed="right" label="操作" width="120">
          <template slot-scope="scope" #default="scope">
            <el-button-group>
              <el-button
                @click="Save(scope)"
                type="primary"
                v-if="scope.row['Indexs'] == state.rowIndex"
                >保存</el-button
              >
              <el-button @click="Edit(scope)" type="primary" v-else
                >编辑</el-button
              >
            </el-button-group>
          </template>
        </el-table-column>
      </template>
    </TableModule>
  </div>
  <!-- 单个学生弹窗 -->
  <!-- <AddFormModule :addModule="addModule"></AddFormModule> -->
  <!-- 编辑信息弹窗 -->
  <!-- <EditFormModule :editModule="editModule"></EditFormModule> -->
</template>

<script setup>
import TableModule from "@/components/TableModule.vue";
// import AddFormModule from "@/components/AddFormModule.vue";
// import EditFormModule from "@/components/EditFormModule.vue";
import { reactive, toRefs, ref, onMounted, toRaw } from "vue";
import { toast } from "@/utils";
import { columnsData, queryData } from "./table"; // 引入我们配置好的数据
import { getAllList, deleteInfo, updateInfo } from "@/api/leave.js";

const props = defineProps({
  height: Number,
});
const state = reactive({
  columns: columnsData, // 表格配置
  query: queryData, // 查询条件配置
  queryForm: {}, // 查询form表单
  // editVisible: false,//编辑表单弹窗
  // editTitle: "",//编辑表单标题
  // edit: editData, //编辑表单配置
  // editForm: {}, //编辑form表单
  // addVisible: false,//新增表单弹窗
  // add: addData, //新增表单配置
  // addForm: {}, //新增form表单
  loading: false, // 加载状态
  dataList: [], // 列表数据
  multipleSelection: [], //多选数组
  rowIndex: null, // 行索引 用于可编辑单元格
  columnIndex: null, // 列索引 用于可编辑单元格
  height: 0,
  pages: {
    isPagination: false,
    // 分页数据
    total: 0,
    limit: 10,
    page: 1,
  },
});

const {
  loading,
  dataList,
  columns,
  pages,
  query,
  queryForm,
  // addVisible,
  // add,
  // addForm,
  // editVisible,
  // editTitle,
  // edit, //编辑表单配置
  // editForm, //编辑表单
  multipleSelection,
  rowIndex,
  columnIndex,
  height,
} = toRefs(state);

const TableModuleRef = ref();

onMounted(() => {
  setTimeout(() => {
    state.height = props.height;
  }, 100);
  // state.queryForm = {
  //   leaveType: state.query[0].options[0].value,
  //   approvalStatus: state.query[1].options[0].value,
  // };
  getDataList();
});

// 传给表格子组件的
const tableModule = ref({
  editInputBlur: editInputBlur, // 可编辑单元的，失去焦点时的回调
  callback: getDataList, // 回调，子组件中可以看到很多调用callback的，这里对应的是获取列表数据的方法
  selectcallback: selectChange,
  // 以下不说了，上面都给解释了
  queryForm: queryForm,
  query: query,
  columns: columns,
  dataList: dataList,
  multipleSelection: multipleSelection,
  rowIndex: rowIndex,
  columnIndex: columnIndex,
  loading: loading,
  pages: pages,
  height: height,
});

// 传给新增表单子组件的
// const addModule = ref({
//   editInputBlur: editInputBlur, // 可编辑单元的，失去焦点时的回调
//   callback: addInfoData, // 回调，子组件中可以看到很多调用callback的，这里对应的是获取列表数据的方法
//   selectcallback: addChange,
//   // 以下不说了，上面都给解释了
//   addForm: addForm,
//   add: add,
//   addVisible: addVisible,
// });

// 传给新增表单子组件的
// const editModule = ref({
//   editInputBlur: editInputBlur, // 可编辑单元的，失去焦点时的回调
//   callback: editInfoData, // 回调，子组件中可以看到很多调用callback的，这里对应的是获取列表数据的方法
//   // 以下不说了，上面都给解释了
//   editForm: editForm,
//   editTitle: editTitle,
//   edit: edit,
//   editVisible: editVisible,
// });

//查询表单值变化
function selectChange() {}

//新增表单值变化
// function addChange() {}

// 获取列表信息
async function getDataList() {
  state.loading = true;
  //参数
  let params = {
    pageNum: state.pages.page,
    pageSize: state.pages.limit,
    leaveType: state.queryForm.leaveType,
    approvalStatus: state.queryForm.approvalStatus,
  };
  if (state.queryForm.leaveType) {
    params.leaveType = state.queryForm.leaveType;
  }
  if (state.queryForm.approvalStatus) {
    params.approvalStatus = state.queryForm.approvalStatus;
  }
  // 掉自己的接口，切勿复制粘贴
  const res = await getAllList(params);
  if (res.code == 200) {
    console.log(`output->res`, res);
    state.dataList = res.data.records;
    state.pages.total = res.data.total;
  } else {
    console.log(`output->error`, res);
    toast(res.data ? res.data : "获取失败", "error");
  }
  state.loading = false;
}

// 点击新增触发弹窗
// function Add() {
//   addVisible.value = true;
// }

//新增信息
// async function addInfoData() {
//   console.log(`output->`, state.addForm);
//   const res = await addInfo(state.addForm);
//   // console.log(`output->addInfoData`, res);
//   if (res.code == 200) {
//     toast(res.data);
//     addVisible.value = false;
//     getDataList();
//   } else {
//     toast(res.data, "error");
//   }
// }

function Edit(row) {
  // 编辑事件
  // state.editVisible = true;
  // state.editTitle = "修改 " + toRaw(row.row).name + " 的信息";
  // state.editForm = toRaw(row.row);
  // console.log(`output->row`, toRaw(row.row), row.$index, row.cellIndex);
  state.rowIndex = row.$index;
  state.columnIndex = row.cellIndex - 1;
}

async function Save(row) {
  // 编辑事件
  console.log(`output->编辑事件`, toRaw(row.row));
  let data = {
    leaveId: toRaw(row.row).leaveId,
    approvalStatus: toRaw(row.row).approvalStatus,
  };
  const res = await updateInfo(data);
  if (res.code == 200) {
    console.log(`output->Edit`, res);
    toast(res.data ? res.data : "修改成功");
    state.rowIndex = null;
    state.columnIndex = null;
  } else {
    console.log(`output->Edit`, res);
    toast(res.msg ? res.msg : "修改失败", "error");
  }
}

//修改信息
// async function editInfoData() {
//   console.log(`output->`, state.editForm);
//   // console.log(`output->addInfoData`, res);
//   if (res.code == 200) {
//     toast(res.data);
//     editVisible.value = false;
//     getDataList();
//   } else {
//     toast(res.data, "error");
//   }
// }

function Delete() {
  // 删除事件
  toRaw(state.multipleSelection).forEach(async (item) => {
    const res = await deleteInfo(item.leaveId);
    if (res.code == 200) {
      console.log(`output->Delete`, res);
      toast(res.data ? res.data : "删除成功");
      setTimeout(getDataList(), 100);
    } else {
      console.log(`output->Delete`, res);
      toast(res.data ? res.data : "删除失败", "error");
    }
  });
}

function editInputBlur() {
  console.log("失去焦点回调");
}
</script>

<style scoped></style>
